<!DOCTYPE html>
<html>
<head lang="en">
    <%include ../base/include.ejs%>
</head>
<body>
    <style>
        .list-fix{
            margin-left: -20px!important;
            padding-left: 20px!important;
        }
    </style>
    <%include ../base/menu.ejs%>
    <div class="container ya-content">
        <div class="row">
            <div class="col-md-4">
                <h2 class="text-muted">程序猿的歌单</h2>
                <ul class="ya-list" id="musicList">
                    <li class="ya-cursor-pointer list-fix ya-music-listening" data-val="57250353"><a>写代码时听的歌</a></li>
                    <li class="ya-cursor-pointer list-fix" data-val="55972703"><a>跑步时听的歌</a></li>
                    <li class="ya-cursor-pointer list-fix" data-val="23746395"><a>睡觉时听的歌</a></li>
                    <li class="ya-cursor-pointer list-fix" data-val="24882981"><a>发呆时候听的歌</a></li>
                    <li class="ya-cursor-pointer list-fix" data-val="22768448"><a>玩游戏时候听的歌</a></li>
                </ul>
            </div>
            <div class="col-md-8">
                <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=720 id="_163Frame"
                    src="http://music.163.com/outchain/player?type=0&id=57250353&auto=1&height=630"></iframe>
            </div>
        </div>
    </div>
</body>
<script>
    $(document).ready(function (){
        $("#musicList").on("click", "li", switchList);
    });

    function switchList(){
        $("#musicList>.ya-music-listening").removeClass("ya-music-listening");
        $(this).addClass("ya-music-listening");
        $("#_163Frame").attr("src",
                "http://music.163.com/outchain/player?type=0&id="+$(this).attr("data-val")+"&auto=1&height=630");
    }
</script>
</html>